<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>百商汇</title>
	<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0,minimum-scale = 1.0,user-scalable = no,width = device-width">
	<meta name="format-detection" content="telephone=no" />
	<link rel="stylesheet" type="text/css" href="../csses/modifyPwd.css">
</head>
<body>
	<div class="modifyPwd_title">
		修改密码
		<img src="../image/back.png" onclick="goBack()" class="back">
	</div>
	<div class="modifyPwd_box">
		<ul>
			<li>
				<span>密码类型</span>
				<div class="pwdType">
					<div class="loginPwd" id="1">
						<span class="outside">
							<span class="inside"></span>
						</span>
						<p>登录密码</p>
					</div>
					<div class="payPwd" id="2">
						<span class="outside">
							<span class="inside"></span>
						</span>
						<p>支付密码</p>
					</div>
				</div>
			</li>
			<li>
				<span>原始密码</span>
				<input type="password" placeholder="请输入您现在使用的密码" class="password"></input>
			</li>
			<li>
				<span>新 密 码</span>
				<input type="password" placeholder="请输入不少于6位的新密码" class="newPassword"></input>
			</li>
			<li>
				<span>确认密码</span>
				<input type="password" placeholder="请再次输入新密码" class="commitPwd"></input>
			</li>
		</ul>

		<button class="submitBtn">确定</button>
		<div class="remindBox"></div>
	</div>
	<script type="text/javascript" src="../lib/flexible.js"></script>
	<script type="text/javascript" src="../lib/jquery-1.10.1.min.js"></script>
	<script type="text/javascript">
		var $remindBox = $('.remindBox');
		function remind(a){
			$remindBox.css('display','block');
			$remindBox.text(a);
			setTimeout(function(){
				$remindBox.css('display','none');
			},1500);
		}

		$('input').focus(function(){
			this.select();
		});

		var type;

		onload = function () {
			var tab = new Tab('inside','outside');
			tab.init();
		};

		function Tab (classname1,classname2) {
			this.aIn = document.getElementsByClassName(classname1);
			this.aOut = document.getElementsByClassName(classname2);
		}

		Tab.prototype.init = function () {
			that = this;
			for(var i = 0; i < this.aOut.length; i++){
				this.aOut[i].index = i;
				this.aOut[i].onclick = function () {
					that.change(this);
					var m = event.target.parentNode;
					type = m.getAttribute('id');
				}
			}
		};

		Tab.prototype.change = function (obj) {
			for(var i = 0; i < this.aOut.length; i++){
				this.aIn[i].style.display = 'none';
			}
			this.aIn[obj.index].style.display = 'block';
		};


		function goBack(){
			window.history.back();
		}

		$('.submitBtn').click(function(){
			var $password = $('.password').val();
			var $newPassword = $('.newPassword').val();
			var $commitPwd = $('.commitPwd').val();
			if(!$password){
				remind('请输入需要修改的密码');
			}else if(!$newPassword){
				remind('请输入修改密码');
			}else if($newPassword.length < 6){
				remind('密码长度不能小于6位');
			}else if($newPassword != $commitPwd){
				remind('两次输入的密码不同');
			}else{
				$.ajax({
					type : 'post',
					url : '/api/v1/user/password/change',
					data : {
						paramStr : "{'userName':'" + sessionStorage.userName + "','token':'" + sessionStorage.token + "','password':'" + $password + "','newPassword':'" + $newPassword + "','type':'" + type + "'}"
					},
					dataType : 'json',
					timeout : 10000,
					success : function (data) {
						if(data.code == 200){
							$('.submitBtn').attr('disabled',true).css('background','#ccc');
							setTimeout(function(){
								window.location.href = '../index1.html#!/personal';
							},1500);
						}
						remind(data.message);
					},
					error : function (xhr,type,errorThrown){
						// alert('未知错误');
					}
				});
			}
		})
	</script>
</body>
</html>